<template>
  <base-breadcrumb :title="$route.meta.title" :breadcrumb="!isAudit">
    <!-- 新增分包计量 -->
    <a-form-model
      ref="ruleForm"
      :model="form"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      :rules="editModel != 0 ? rules : {}"
    >
      <a-spin :spinning="loading">
        <!-- 表格 -->
        <a-card :bordered="false">
          <title-name title="基础信息"></title-name>
          <custom-form
            :isEmit="false"
            :formList="formList"
            :form="form"
            :editModel="editModel == 0 ? '' : ''"
            @change="changeForm"
            @selectOrg="selectOrg"
          >
            <template v-slot:table>
              <a-form-model-item
                class="mb20"
                label=" "
                :colon="false"
              >
                <s-table
                  bordered
                  ref="table"
                  tableLayout="fixed"
                  size="default"
                  rowKey="key"
                  :columns="columns"
                  :data="loadData"
                  :alert="true"
                  show-size-changer
                  show-quick-jumper
                  :showPagination="false"
                >
                  <template
                    v-for="col in ['excludingTax', 'includingTax', 'valueAddedTax']"
                    :slot="col"
                    slot-scope="text, record, index"
                  >
                    <div
                      :key="col"
                      class="form-item"
                    >
                      <template v-if="editModel != 0 && (index == 0 || index == 2)">
                        <!-- <span v-if="col === 'includingTax'">{{ record[col] == undefined ? '无' : record[col] }}</span> -->
                        <BaseInputNumber
                          v-if="col === 'includingTax'"
                          v-model="record[col]"
                          :precision="2"
                          disabled
                        />
                        <BaseInputNumber
                          v-else
                          v-model="record[col]"
                          @blur="changeTable()"
                          :min="0"
                          :precision="2"
                        />
                      </template>
                      <template v-else>
                        <BaseInputNumber
                          disabled
                          v-model="record[col]"
                          :precision="2"
                        />
                      </template>
                    </div>
                  </template>
                  <template
                    slot="remark"
                    slot-scope="text, record"
                  >
                    <BaseInput
                      v-if="editModel != 0"
                      placeholder="请输入"
                      v-model="record.remark"
                    ></BaseInput>
                    <span v-else>{{ text }}</span>
                  </template>
                </s-table>
              </a-form-model-item>
            </template>
          </custom-form>
        </a-card>

        <!-- 页脚操作栏 -->
        <div
          class="btn_box page-btn-right-top"
          v-if="editModel != 0"
        >
          <template v-if="form.isYun == 0">
            <a-button
              class="button_right"
              v-if="form.status == 'REJECTED'"
              type="primary"
              :disabled="!isAdd"
              :loading="loadingBtn.REJECTED"
              @click="handleSubmit('REJECTED')"
            >保存</a-button>
            <a-button
              v-else
              class="button_right"
              type="primary"
              :disabled="!isAdd"
              :loading="loadingBtn.DRAFT"
              @click="handleSubmit('DRAFT')"
            >保存草稿</a-button>
            <a-button
              class="button_right"
              type="primary"
              :disabled="!isAdd"
              :loading="loadingBtn.SUBMITTED"
              @click="handleSubmit('SUBMITTED')"
            >提交</a-button>
          </template>
          <template v-else>
            <a-button
              class="button_right"
              type="primary"
              :disabled="!isAdd"
              :loading="loadingBtn.SUBMITTED"
              @click="handleSubmit('SUBMITTED')"
            >提交</a-button>
          </template>

          <a-button @click="handleActiveClose">关闭</a-button>
        </div>
        <div
          class="btn_box page-btn-right-top"
          v-else
        >
          <a-button
            class="ml12"
            @click="handleActiveClose"
          >关闭</a-button>
        </div>
      </a-spin>
    </a-form-model>
    <selectApprover :businessId="businessId"  :processConfig="setProcessConfig"></selectApprover>
  </base-breadcrumb>
</template>

<script>
import { updateSMList, addSMList, getSMList, getSMListTable, getSMListPenaltyMonth, getSMListList } from '@/api/businessAffairs/SMList' // api
import printButton from '@/components/BasePrintButton' // 打印
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import SelectPersonModal from '@/components/SelectPersonModal'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 分公司
import SelectPersonByProject from '@/components/Select/SelectPersonByProject'
import BSelect from '@/components/BComponents/BSelect'
import SelectSubcontractorCode from '@/components/Select/SelectSubcontractorCode' // 分包商
// import SelectSubcontractor from '@/components/Select/SelectSubcontractor' // 分包商
import subcontract from '@/api/legal/branchContract/subcontract'
import ExportExcel from '@/components/exportExcel/ExportExcel' // 导出
import DialogForm from '@/components/DialogForm' // 弹窗
import { ninvoke } from 'q'
const columns = [
  {
    title: '项目/金额',
    dataIndex: 'name'
  },
  {
    title: '1.不含增值税(元)',
    dataIndex: 'excludingTax',
    scopedSlots: { customRender: 'excludingTax' }
  },
  {
    title: '2.增值税(元)',
    dataIndex: 'valueAddedTax',
    scopedSlots: { customRender: 'valueAddedTax' }
  },
  {
    title: '含增值税(元)(1+2)',
    dataIndex: 'includingTax',
    scopedSlots: { customRender: 'includingTax' }
  },
  {
    title: '备注',
    dataIndex: 'remark',
    scopedSlots: { customRender: 'remark' }
  }
]

export default {
  name: 'a' + Date.now(),
  extends: new BaseEditPage(),
  components: {
    SelectPersonModal,
    SelectPersonByProject,
    SelectSubcontractorCode,
    ExportExcel,
    DialogForm,
    printButton
  },
  data() {
    this.columns = columns
    return {
      loading: false, // 加载控件
      visible: false, //弹窗控件
      editModel: 0, // 操作状态:0 查看;1 编辑;2 新增
      editModelDialog: '0', //弹框操作状态:0 查看;1 编辑;2 新增
      form: { projectId: '',detailDTOS: [], addMouthTotal: '', isYun: 0, reportFileInfos: [], reportFileInfos: [], reportFileInfos: [] }, // 表单
      id: '',
      projectName: '',
      isAdd: true, //是否可添加数据
      loadingBtn: {
        DELETE: false,
        DRAFT: false,
        SUBMITTED: false,
        REJECTED: false
      },
      ConstData: [],
      findCountQueryParam: {
        pageNo: 1,
        pageSize: 10000,
        query: {}
      },
      rules: {
        subcontractorScc: [{ required: true, message: '请选择' }],
        contractNameId: [{ required: true, message: '请选择' }],
        code: [{ required: true, message: '请选择分包合同' }],
        contractTypeStr: [{ required: true, message: '请选择分包合同' }],
        outputName: [{ required: true, message: '请输入' }],
        outputNameId: [{ required: true, message: '请输入' }],
        measureMonth: [{ required: true, message: '请选择' }],
        progressPayment: [{ required: true, message: '请选择分包合同' }],
        penaltyMonth: [{ required: true, message: '请输入' }],
        ticketTotal: [{ required: true, message: '请输入本月罚款' }],
        // : [{ required: true, type: 'array', message: '请上传报量审定资料' }],
        reportFileInfos: { type: 'array', required: true, message: '请上传报量审定资料', trigger: 'blur' },
        subcontractingFileInfos: [{ required: true, type: 'array', message: '请上传分包报量资料', trigger: 'blur' }],
        outputFileInfos: [{ required: true, type: 'array', message: '请上传产值单', trigger: 'blur' }]
      },
      loadData: () => {
        return new Promise((resolve, reject) => {
          console.log(this.form.detailDTOS)
          resolve({
            data: this.form.detailDTOS || []
          })
        })
      },
      // 是否是云筑数据
      isYun: 0,
      init: false, // 初始化控件
      titles: ['分包计量查看', '分包计量编辑', '分包计量新增'],
      //获取流程配置值
      processConfig: null,
      //点击提交发送流程配置值
      setProcessConfig: null,
      businessId: null
    }
  },
  props: {
    isAudit: {
      // 是否作为审批详情
      type: Boolean,
      default: false
    }
  },
  watch: {
    isAudit: {
      immediate: true,
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.editModel = 0
          })
        }
      }
    }
  },
 async mounted() {
    this.$route.meta.title = ['分包计量查看', '分包计量编辑', '分包计量新增'][this.editModel]
    // 不为添加时请求详情
    if (this.editModel != 2) {
      this.getDetails()
    } else {
      this.$nextTick(() => {
        // 默认映射联系人为登陆人
        this.form.creatorName = this.$userInfo().name
        this.form.projectId = this.$userInfo().currentPost.projectId;
        this.form.createTime = this.$dateFormat(new Date(), 'D')
        this.init = true
      })
    }
     //获取通过获取流程配置值
      this.processConfig = await this.$getConfigFn('comm_subcontract_new_measure');
  },
  computed: {
    formList() {
      const list = [
        {
          label: '所属单位',
          type: 'orgTree',
          keyName: 'projectId',
          checkStrictly: true,
          isAutoSelectFirst: true,
          rules: [{ required: true, message: '请选择所属单位', trigger: 'change' }],
          span:16,
          disabled: true,
          isNeedAuth: true
        },
        // {
        //   type: SelectSubCompany,
        //   keyName: 'branchComId',
        //   label: '所属分公司',
        //   disabled: true,
        //   attrs: {
        //     isDefaultSelected: this.editModel == 2,
        //     autoSelected: this.editModel == 2
        //   }
        // },
        // {
        //   type: SelectProject,
        //   keyName: 'projectId',
        //   label: '所属项目',
        //   disabled: true,
        //   attrs: {
        //     isDefaultSelected: this.editModel == 2,
        //     autoSelected: this.editModel == 2,
        //     keyValue: 'branchComId',
        //     isClear: this.editModel == 2,
        //     isEdit: this.editModel != 2,
        //     form: this.form
        //   },
        //   selectChange: (e) => {
        //     console.log(e)
        //     this.form.projectDeptId = e?.projectDeptId
        //   }
        // },
        {
          keyName: 'subcontractorName',
          type: 'a-input',
          disabled: true,
          label: '分包单位',
          placeholder: '自动带出',
          hidden: this.editModel !== 0
        },
        {
          type: SelectSubcontractorCode,
          keyName: 'subcontractorScc',
          label: '分包单位',
          disabled: this.editModel == 0,
          hidden: this.editModel == 0,
          // hidden: this.form.isYun != 0,
          placeholder: '请选择分包单位',
          attrs: {
            keyValue: 'projectId',
            isClear: this.editModel == 2,
            isEdit: this.editModel != 2,
            form: this.form
          },
          selectChange: (e, b) => {
            this.form.subcontractorName = e?.subSupplyCompany
            this.$set(this.form, 'contractNameId', undefined)
            this.$set(this.form, 'contractName', undefined)
            this.$set(this.form, 'code', undefined)
            this.$set(this.form, 'contractTypeStr', undefined)
            this.$set(this.form, 'progressPayment', undefined)
          }
        },
        // {
        //   keyName: 'subcontractorName',
        //   type: 'BaseInput',
        //   disabled: true,
        //   hidden: this.form.isYun != 1,
        //   label: '分包单位'
        // },
        {
          keyName: 'contractName',
          type: 'a-input',
          disabled: true,
          label: '合同名称',
          placeholder: '自动带出',
          hidden: this.editModel !== 0
        },
        {
          keyName: 'contractNameId',
          type: BSelect,
          disabled: this.editModel == 0 || this.form.isYun == 1,
          hidden: this.editModel == 0,
          //disabled: this.editModel == 0,
          label: '合同名称',
          placeholder: '请选择合同名称',
          attrs: {
            form: this.form,
            keyValue: 'subcontractorScc',
            request: this.getNameList
          },
          selectChange: (e) => {
            //切换名称获取数据
            this.form.contractName = e.contractName
            this.form.code = e.contractCode //合同编号
            this.form.contractTypeStr = e.contractTypeStr //分包方式
            this.form.progressPayment = e.progressPro //进度款支付比例
            this.getTable() //获取表格数据
            this.getPenaltyMonth() //获取上月累计付款
            this.isDuplicateData() //判断该月份是否有数据
          }
        },
        {
          keyName: 'code',
          type: 'BaseInput',
          disabled: true,
          placeholder: '自动带出',
          label: '合同编号'
        },
        {
          keyName: 'contractTypeStr',
          type: 'BaseInput',
          disabled: true,

          label: '分包方式',
          placeholder: '自动带出'
        },
        {
          keyName: 'outputName',
          type: 'BaseInput',
          disabled: this.editModel == 0 || this.form.isYun == 1,
          label: '产值单名称'
        },
        {
          keyName: 'outputNameId',
          type: 'BaseInput',
          disabled: this.editModel == 0,
          label: '产值单编号'
        },

        {
          label: '计量月份',
          type: 'a-month-picker',
          keyName: 'measureMonth',
          disabled: this.editModel == 0,
          attrs: {
            valueFormat: 'YYYY-MM'
          },
          change: (e) => {
            this.getTable()
            this.getPenaltyMonth()
            this.isDuplicateData()
          }
        },
        {
          keyName: 'progressPayment',
          type: 'BaseInput',
          disabled: true,
          placeholder: '自动带出',
          label: '进度款支付比例'
        },

        {
          keyName: 'penaltyMonth',
          type: 'BaseInputNumber',
          disabled: this.editModel == 0,
          label: '本月罚款(元)',
          change: (e) => {
            this.form.addMouthTotal = (this.form.ticketTotal || 0) + (this.form.penaltyMonth || 0)
          }
        },
        {
          keyName: 'addMouthTotal',
          type: 'BaseInput',
          disabled: true,
          label: '累计罚款(元)'
        },
        {
          slot: true,
          customItemSlot: true,
          keyName: 'table',
          span: 24
        },
        {
          keyName: 'creatorName',
          type: 'BaseInput',
          disabled: true,
          label: '填写人'
        },
        {
          keyName: 'createTime',
          type: 'a-date-picker',

          disabled: true,
          label: '填写时间',
          attrs: {
            valueFormat: 'YYYY-MM-DD'
          }
        },
        {
          keyName: 'yunFileInfos',
          type: 'uploadFile',
          label: '云筑网附件',
          hidden: this.form.isYun == 0,
          disabled: this.editModel == 0,
          span: 24,
          businessCode: 'BM06'
        },
        {
          keyName: 'ticketFileInfos',
          type: 'uploadFile',
          label: '罚款单',
          disabled: this.editModel == 0,
          span: 24,
          businessCode: 'BM06'
        },
        {
          keyName: 'subcontractingFileInfos',
          type: 'uploadFile',
          label: '*分包报量资料',
          disabled: this.editModel == 0,
          span: 24,
          businessCode: 'BM06'
        },
        {
          keyName: 'reportFileInfos',
          type: 'uploadFile',
          label: '*报量审定资料',
          disabled: this.editModel == 0,
          span: 24,
          businessCode: 'BM06'
        },
        {
          keyName: 'outputFileInfos',
          type: 'uploadFile',
          label: '*产值单',
          hidden: this.form.isYun == 1,
          disabled: this.editModel == 0,
          span: 24,
          businessCode: 'BM06'
        }
      ]
      try {
        if (this.isYun === 1) {
          return list.map((el) => {
            if (el.keyName === 'subcontractorScc') {
              return {
                keyName: 'subcontractorName',
                type: 'BaseInput',
                disabled: true,
                label: el.label
              }
            } else if (el.keyName === 'contractNameId') {
              return {
                keyName: 'contractName',
                type: 'BaseInput',
                disabled: true,
                label: el.label
              }
            } else {
              return el
            }
          })
          onsole.log(error)
        } else {
        }
      } catch (error) {
        console.log(error)
      }
      return list
    }
  },
  methods: {
    //所属单位
    selectOrg(val) {
      if(val&&val.length) {
        this.form.branchComId = val[val.length - 2].orgId
        // this.form.projectId = val[val.length - 1].projectId
        console.log('this.form',this.form)
        this.$forceUpdate()
      }
    },
    changeForm(e) {
      this.form.projectDeptId = e?.projectDeptOrgId
    },
    /**
     * 操作栏 type:0 新增;1 编辑
     */
    handleManage(type, record) {
      this.editModelDialog = type == '0' ? 'V' : type // 映射操作类型
      this.initData = type == '2' ? {} : record // 配置参数
      this.visible = true // 打开表单
    },
    isDuplicateData() {
      let params = this.initParams()
      params.choose = 1
      if (params.measureMonth && params.contractNameId) {
        getSMListList({ needCont: false, query: params }).then((res) => {
          if (res.data.length != 0) {
            this.isAdd = false
            if (this.form.isYun) {
              this.$message.warning('平台已新增该合同本月分包计量数据，需删除后，此条数据才能编辑成功。')
              return
            }
            this.$message.warning('数据已存在 ，不能重复添加')
          } else {
            this.isAdd = true
          }
        })
      }
    },
    initParams() {
      return {
        branchComId: this.form.branchComId,
        projectId: this.form.projectId,
        measureMonth: this.form.measureMonth,
        // subcontractorId: this.form.subcontractorScc,
        contractNameId: this.form.contractNameId
      }
    },
    async getNameList() {
      if (this.form.projectId && this.form.subcontractorName) {
        let req = {
          projectId: this.form.projectId,
          subSupplyCompany: this.form.subcontractorName
        }
        // this.findCountQueryParam.query.subSupplyCompany = this.form.subcontractorName
        return subcontract
          .getSubContractByScc(req)
          .then((res) => {
            if (res.data?.length > 0) {
              res.data.map((item) => {
                item.name = item.contractName
                item.id = item.contractId
              })
            }
            return { code: 200, data: res.data }
          })
          .catch(() => {
            return { code: 200, data: [] }
          })
      }
      return { code: 200, data: [] }
    },
    initAdd(flag) {
      console.log('this.ConstDatathis.ConstData',this.ConstData)
      //第一行计算
      let tableData = this.form.detailDTOS || []
      if (tableData.length > 0) {
        if (flag) {
          console.log('99999999999',flag)
          tableData[0].includingTax = (tableData[0].excludingTax || 0) + (tableData[0].valueAddedTax || 0)
          //第二行计算
          tableData[1].excludingTax = (this.ConstData[1].excludingTax || 0) + (tableData[0].excludingTax || 0)

          tableData[1].valueAddedTax = (this.ConstData[1].valueAddedTax || 0) + (tableData[0].valueAddedTax || 0)

          tableData[1].includingTax = (this.ConstData[1].includingTax || 0) + (tableData[0].includingTax || 0)

          //第三行计算
          tableData[2].includingTax = (tableData[2].excludingTax || 0) + (tableData[2].valueAddedTax || 0)

          //第四行计算
          tableData[3].excludingTax = (this.ConstData[3].excludingTax || 0) + (tableData[2].excludingTax || 0)

          tableData[3].valueAddedTax = (this.ConstData[3].valueAddedTax || 0) + (tableData[2].valueAddedTax || 0)

          tableData[3].includingTax = (this.ConstData[3].includingTax || 0) + (tableData[2].includingTax || 0)
        } else {
          // //第二行计算
          tableData[1].excludingTax = this.ConstData[1].excludingTax || 0

          tableData[1].valueAddedTax = this.ConstData[1].valueAddedTax || 0

          tableData[1].includingTax = this.ConstData[1].includingTax || 0

          //第四行计算
          tableData[3].excludingTax = this.ConstData[3].excludingTax || 0

          tableData[3].valueAddedTax = this.ConstData[3].valueAddedTax || 0

          tableData[3].includingTax = this.ConstData[3].includingTax || 0
        }
        //第五行计算
        if (this.form.progressPayment) {
          tableData[4].excludingTax = ((tableData[3].excludingTax || 0) * this.form.progressPayment) / 100

          tableData[4].valueAddedTax = ((tableData[3].valueAddedTax || 0) * this.form.progressPayment) / 100

          tableData[4].includingTax = ((tableData[3].includingTax || 0) * this.form.progressPayment) / 100
        }
      }
    },
    changeTable() {
      this.initAdd(true)
    },
    getTable() {
      const params = this.initParams()
      if (params.measureMonth && params.contractNameId) {
        this.loading = true
        getSMListTable(params)
          .then((res) => {
            res.data[4].excludingTax = this.form.progressPayment ? (res.data[4].excludingTax * this.form.progressPayment) / 100 : '/'
            res.data[4].valueAddedTax = this.form.progressPayment ? (res.data[4].valueAddedTax * this.form.progressPayment) / 100 : '/'
            res.data[4].includingTax = this.form.progressPayment ? (res.data[4].includingTax * this.form.progressPayment) / 100 : '/'

            this.form.detailDTOS = res.data

            this.ConstData = this.$clone(res.data)

            this.changeTable()
            this.loading = false
            this.$refs.table.refresh(true)
          })
          .catch(() => {
            this.loading = false
          })
      }
    },
    getPenaltyMonth() {
      const params = this.initParams()
      if (params.measureMonth && params.contractNameId) {
        getSMListPenaltyMonth(params).then((res) => {
          this.form.ticketTotal = res.data.ticketTotal
          this.form.addMouthTotal = (this.form.ticketTotal || 0) + (this.form.penaltyMonth || 0)
        })
      }
    },
    getDetails() {
      this.loading = true
      getSMList({ id: this.id })
        .then((res) => {
          this.loading = false
          this.form = res.data
          this.isYun = res.data.isYun
          this.form.addMouthTotal = (this.form.ticketTotal || 0) + (this.form.penaltyMonth || 0)
          console.log('res.data.detailDTOSres.data.detailDTOS',res.data.detailDTOS)
          this.ConstData = this.$clone(res.data.detailDTOS)
          this.$refs.table.loadData()
          this.$nextTick(() => {
            this.init = true
            this.initAdd(true)
          })
        })
        .catch(() => {
          this.loading = false
        })
    },
    /**
     * 提交表单
     */
    validateForm() {
      let flag1 = true
      let flag2 = true
      this.$refs.ruleForm.validate((e) => {
        flag1 = e
      })
      if (!this.form.detailDTOS || this.form.detailDTOS.length == 0) {
        this.$message.warning("请填写完所有必填项信息")
        return false
      }
      if (!this.form.detailDTOS[0].excludingTax || !this.form.detailDTOS[0].valueAddedTax || !this.form.detailDTOS[2].excludingTax || !this.form.detailDTOS[2].valueAddedTax) {
        if (this.form.detailDTOS[0].excludingTax == null || this.form.detailDTOS[0].valueAddedTax == null || this.form.detailDTOS[2].excludingTax == null || this.form.detailDTOS[2].valueAddedTax==null) {
          this.$message.warning('请填写表格数据')
          flag2 = false
        }
      }
      if (flag1 && flag2) {
        return true
      } else {
        this.$message.warning("请填写完所有必填项信息")
        return false
      }
    },
    okSubmit(status) {
      this.setProcessConfig = null;
      this.loading = true
      this.loadingBtn[status] = true

      this.initAdd(false)
      let form = this.$clone(this.form)
      form.status = this.form.isYun == 1 ? void 0 : status
      if (form.detailDTOS && form.detailDTOS.length > 0) {
        form.detailDTOS[4].excludingTax = 0
        form.detailDTOS[4].valueAddedTax = 0
        form.detailDTOS[4].includingTax = 0
      }
      let api = [updateSMList, addSMList][this.editModel - 1] // 根据操作切换url地址
      api(form)
        .then((res) => {
          this.loading = false
          this.loadingBtn[status] = false
          this.$message.success(status == 'SUBMITTED' ? '提交成功！' : '保存成功')
          //云筑网数据提交不发起流程
          if(status == 'SUBMITTED' && !this.$route.query.yunStatus){
            //提交时，返回id
            this.businessId = res.data?.id || this.id;
            this.setProcessConfig = this.processConfig;
          }else{
              this.$multiTab.close()
          }
        })
        .catch((err ) => {
          this.loadingBtn[status] = false
          this.loading = false
          this.$message.warning(err.data.message)
        })
    },
    /**
     * 提交表单
     */
    handleSubmit(status) {
      if (status == 'SUBMITTED' && !this.validateForm()) {
        return
      }
      this.okSubmit(status)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .form-item  {
  .ant-input:not([disabled]),
  .ant-select:not(.ant-select-disabled) .ant-select-selection,
  .ant-calendar-picker-input,
  .ant-input-number:not([disabled]),
  .ant-cascader-picker {
    border-color: #e4ac0b;
    background-color: #fff9e8;
  }
  .ant-input-disabled,
  .ant-input-number-disabled .ant-input-number-input,
  .ant-time-picker-input[disabled] {
    border-color: #d9d9d9 !important;
    background-color: #f5f5f5 !important;
  }
  .remark {
    .ant-input {
      border-color: inherit;
      background-color: initial;
    }
  }
}
</style>
<style lang="less" scoped>
.form-item {
  text-align: center;
}
</style>
